<!-- 顶部导航栏组件 -->
<div id="navbar-template" class="hidden">
  <div class="bg-white shadow-md px-4 py-3 flex items-center justify-between">
    <div class="flex items-center">
      <button class="mr-2 text-gray-600" onclick="window.history.back()">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h1 class="text-lg font-medium text-gray-800">页面标题</h1>
    </div>
    <div>
      <button class="text-gray-600 px-2">
        <i class="fas fa-search"></i>
      </button>
    </div>
  </div>
</div>

<!-- 底部导航栏组件 -->
<div id="bottom-nav-template" class="hidden">
  <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg px-2 py-2">
    <div class="flex justify-around items-center">
      <a href="home.html" class="flex flex-col items-center p-2">
        <i class="fas fa-home text-xl text-orange-500"></i>
        <span class="text-xs mt-1 text-gray-600">首页</span>
      </a>
      <a href="random.html" class="flex flex-col items-center p-2">
        <i class="fas fa-dice text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-600">随机</span>
      </a>
      <a href="filter.html" class="flex flex-col items-center p-2">
        <i class="fas fa-filter text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-600">筛选</span>
      </a>
      <a href="favorites.html" class="flex flex-col items-center p-2">
        <i class="fas fa-heart text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-600">收藏</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center p-2">
        <i class="fas fa-user text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-600">我的</span>
      </a>
    </div>
  </div>
</div>

<!-- 食物卡片组件 -->
<div id="food-card-template" class="hidden">
  <div class="bg-white rounded-lg overflow-hidden shadow-md">
    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c" alt="美食图片" class="w-full h-48 object-cover">
    <div class="p-4">
      <div class="flex justify-between items-start">
        <h3 class="text-lg font-medium text-gray-900">美食名称</h3>
        <button class="text-gray-400 hover:text-red-500">
          <i class="far fa-heart"></i>
        </button>
      </div>
      <p class="text-sm text-gray-600 mt-1">¥25 · 10分钟 · 西式快餐</p>
      <div class="flex items-center mt-2">
        <div class="flex text-yellow-400">
          <i class="fas fa-star text-sm"></i>
          <i class="fas fa-star text-sm"></i>
          <i class="fas fa-star text-sm"></i>
          <i class="fas fa-star text-sm"></i>
          <i class="fas fa-star-half-alt text-sm"></i>
        </div>
        <span class="text-xs text-gray-500 ml-1">4.5 (328条评价)</span>
      </div>
      <div class="mt-3 flex justify-between">
        <span class="inline-block bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">附近热门</span>
        <span class="text-xs text-gray-500">500m</span>
      </div>
    </div>
  </div>
</div>

<!-- 加载组件 -->
<div id="loading-template" class="hidden">
  <div class="flex justify-center items-center h-64">
    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-orange-500"></div>
  </div>
</div>

<!-- 通用脚本 -->
<script>
  function includeComponent(elementId, targetSelector, setActive) {
    const template = document.getElementById(elementId);
    if (template && targetSelector) {
      const targetElement = document.querySelector(targetSelector);
      if (targetElement) {
        targetElement.innerHTML = template.innerHTML;
        
        // 如果需要设置活跃项
        if (setActive) {
          const currentPage = window.location.pathname.split('/').pop();
          const links = targetElement.querySelectorAll('a');
          links.forEach(link => {
            const linkPage = link.getAttribute('href');
            if (linkPage === currentPage) {
              const icon = link.querySelector('i');
              const text = link.querySelector('span');
              if (icon) icon.classList.replace('text-gray-400', 'text-orange-500');
              if (text) text.classList.replace('text-gray-600', 'text-orange-500');
            }
          });
        }
      }
    }
  }
</script>